<template>
  
  <!--  goods头-->
  <div class="top-message-box">
    <goods-top-box>
      <template v-slot:left-one>为你推荐</template>
      <template v-slot:right-one>
        <svg @click="nextPage" class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangzuo"></use>
        </svg>
        <svg @click="previous" class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangyou"></use>
        </svg>
      </template>
    </goods-top-box>
    
    <div class="image-massage">
      
      <ul ref="imageGroup" class="image-massage-group">
        <li class="image-massage-item" v-for="item in recommend">
          <a :href="item.sourceUrl">
            
            <img class="show-image" :src="item.imgUrl" alt="">
          
          
          </a>
          
          
          <p class="item-title">{{ item.name }}</p>
          <p class="item-price">{{ item.price }}</p>
          <p class="item-evaluation">{{ item.favorable }}人评价</p>
        
        
        </li>
      </ul>
    
    </div>
  
  </div>

</template>

<script>
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";
import '@/assets/font/recommend/recommend'

export default {
  name: "Recommend",
  components: {GoodsTopBox},
  data() {
    return {
      recommend: [],
      currPage: 0,
    }
  },
  created() {
    this.getRecommend()
  },
  methods: {
    async getRecommend() {
      const {data: res} = await this.$http.get('recommend')
      this.recommend = res.recomends
    },
    previous() {
      let imageGroup = this.$refs.imageGroup
      if (this.currPage < Math.floor((this.recommend.length - 1) / 5)) {
        this.currPage++
        imageGroup.setAttribute('style', `margin-left: ${this.currPage * (-1224)}px;`)
      } else {
        this.currPage = 0
        imageGroup.setAttribute('style', `margin-left: ${this.currPage * (-1224)}px;`)
      }
    },
    nextPage() {
      let imageGroup = this.$refs.imageGroup
      if (this.currPage !== 0) {
        this.currPage--
        imageGroup.setAttribute('style', `margin-left: ${this.currPage * (-1224)}px;`)
      } else {
        this.currPage = 3
        imageGroup.setAttribute('style', `margin-left: ${this.currPage * (-1224)}px;`)
      }
    }
  }
}
</script>

<style scoped lang="less">

.top-message-box {
  .icon {
    margin-left: 20px;
    font-size: 1.5em;
    border: 2px solid #ff6700;
    border-radius: 1.5em;
    color: #ff6700;
  }
}

.image-massage {
  width: 1226px;
  height: 310px;
  overflow: hidden;
  
  .image-massage-group {
    width: auto;
    height: 300px;
    transition: all 0.3s;
    //display: flex;
    .image-massage-item {
      float: left;
      display: block;
      width: 234px;
      height: 300px;
      margin: 0 13px 14px 0;
      font-size: 14px;
      background: #fff;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-3px);
      }
      
      &:nth-last-child(5n+1) {
        margin-right: 0;
      }
      
      .show-image {
        display: block;
        width: 140px;
        height: 140px;
        margin: 40px auto 15px;
        
      }
      
      
      .item-title {
        margin-bottom: 10px;
        font-weight: normal;
        font-size: 14px;
        text-align: center;
        color: #333;
      }
      
      .item-price {
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        color: #ff6700;
      }
      
      .item-evaluation {
        font-size: 14px;
        text-align: center;
        color: #757575;
        
      }
      
    }
  }
}

</style>
